<template>
  <div class="spots">
    <span
      v-for="(item, index) in items"
      :key="index"
      class="decorate"
      :style="item"
    />
  </div>
</template>

<script>
const colors = [
  '#c91b00', '#e92224', '#ff5600', '#392673', '#e92224',
  '#392673', '#003e87', '#175aab', '#0087e7'
]

export default {
  name: 'Spots',
  props: {
    size: {
      type: Number,
      default: 10
    }
  },
  data() {
    return {
      items: []
    }
  },
  mounted() {
    const parentNode = this.$el.parentNode
    const originPosition = typeof getComputedStyle === 'function' ? getComputedStyle(parentNode)['position'] : parentNode.style.position
    !originPosition && (parentNode.style.position = 'relative')
    parentNode.style.overflow = 'hidden'
    for (let i = 0; i < this.size; i++) {
      this.items.push(this.getItem(i, this.size))
    }
  },
  methods: {
    getItem(index, length) {
      const size = parseInt(Math.random() * 10 + 10, 10) + parseInt(Math.random() * 30 + 10, 10)
      const color = colors[parseInt(Math.random() * 10, 10)]
      const base = 100 / length
      const left = base * (index + 1)
      const style = {
        background: color,
        width: `${ size }px`,
        height: `${ size }px`,
        marginTop: `-${ size / 2 }px`,
        marginLeft: `-${ size / 2 }px`,
        top: `${ Math.random() * 100 }%`,
        left: `${ left - (base / 2) }%`
      }
      return style
    }
  }
}
</script>

<style scoped>
.decorate {
  position: absolute;
  left: 200px;
  width: 50px;
  height: 50px;
  background-color: #4b89fc;
  border-radius: 50%;
  opacity: .13;
}
</style>
